<template>
    <div>
        <div style="width: 100%;display: flex;justify-content: center;">
          <div style="width: 1200px;">
            <div>
                <div style="display: flex;align-items: center;border-bottom: 1px solid #e6e6e6;padding: 20px 0;margin-top: 10px;">
                    <div style="height: 16px;width: 8px;background-color:#256aff;border-radius: 5px;margin-right: 10px;"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                      <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> -->
                      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                      <el-breadcrumb-item>产品与服务</el-breadcrumb-item>
                      <el-breadcrumb-item>我们的产品</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div style="display:flex;justify-content: center;flex-direction: column;font-size:26px;align-items: center;margin-top: 50px;">
                  <span style="text-align: center;font-weight: bold;color:#363636">我们的产品</span>
                  <span style="font-size:16px;color:#c8c8c8">Our Produts</span>
                </div>
                <div>
                    <el-button v-for="(item,index) in productList" @click="seleProduct(item,index)">{{ item.productName }}</el-button>
                    <!-- <el-button>智能风控系统</el-button> -->
                </div>
                <div style="margin-top: 50px">
                  <div class="img" :style="{'backgroundImage':'url('+baseURL_dev+productDetail.productImageUrl+')'}"></div>
                </div>
            </div>
            <div style="margin: 50px 0;display: flex;align-items: center;">
                <div style="height: 24px;width: 7px;background-color:#256aff;border-radius: 6px;"></div>
                <div style="font-size: 26px;margin-left: 20px;">{{ productDetail.productName }}</div>
            </div>
            <div style="font-size: 14px;color: #999;line-height: 30px;margin-bottom: 30px;">
              <div v-html="productDetail.productIntroduce"></div>
              <!-- {{ productDetail.productIntroduce }} -->
            </div>
          </div>
        </div>
      <div style="width: 100%;">
        <!-- <div style="width: 1200px;"> -->
          <Foot />
        <!-- </div> -->
      </div>
    </div>
</template>

<script setup lang="ts">
import Foot from './foot.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { onMounted,ref,watch } from 'vue'
import { $ProductList } from '../api/api'
import { baseURL_dev } from '../config/baseUrl'

onMounted(()=>{
  loadProductList()
})

let productList = ref([])
let productDetail = ref({})

const seleProduct = async (item,index)=>{
  productDetail.value = item
}

const loadProductList = async ()=>{
    let ret = await $ProductList()
    console.log(ret)
    productList.value = ret.rows
    console.log('productList',productList.value)
    productDetail.value = productList.value[0]
  }

</script>

<style scoped>
.img{
  height: 400px;
  background-size: 100% 100%
}
</style>